<template>
    <div>
        <div class="col-md-4 article-wrap" v-for="list in lists">
            <article class="post type2">
                <div class="entry-thumb">
                    <img :src="list.src" class="img-responsive" alt="">
                    <div class="image-overlay"></div>
                    <a :href="list.src" data-rel="prettyPhoto" class="ima-zoom"><i class="fa fa-plus"></i></a>
                </div>
                <!-- /.entry-thumb -->
                <div class="entry-wrap">

                    <!--TODO-->
                    <!--找到主题帖，展示出来-->
                    <header class="entry-header">
                        <h1 class="entry-title"><a href="/#/themeView" rel="bookmark">{{list.title}}</a></h1>
                    </header>
                    <!-- /.entry-header -->

                    <!--TODO-->
                    <!--找到对应主题帖内容，展示一部分内容-->
                    <div class="entry-content">
                        <p>{{list.content}}</p>
                    </div>
                    <!-- /.entry-content -->
                    <div class="entry-meta">
                        <span class="post-date"><i class="fa fa-clock-o"></i> <a href="#" title="6:17 pm">21 August, 2020</a></span>
                        <span class="comments-link"><i class="fa fa-comments"></i> <a href="#">7 Replies</a></span>
                    </div>
                    <!-- /.entry-meta -->
                </div>
                <!-- /.entry-wrap -->
            </article>
            <!-- /.post -->
        </div>
    </div>
</template>

<script>
export default {
    name:"theme",
    data(){
        return{
            lists:[
                {
                    src:"static/img/general/img1.jpg",
                    title:"Eum ne adolescens disputando",
                    content:"Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.",

                },
                
                {
                    src:"static/img/general/img3.jpg",
                    title:"Eam ex putant omnesque explicari",
                    content:"Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.",

                },
                
                {
                    src:"static/img/general/img4.jpg",
                    title:"Eam ex putant omnesque explicari",
                    content:"Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.",

                },

                {
                    src:"static/img/general/img5.jpg",
                    title:"Eam ex putant omnesque explicari",
                    content:"Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.",

                }
            ]
        }
    }
}
</script>